<template>
  <div style="width: 100%;height: 800px;background-color: rgba(217,217,134,0.13)">
    <div style="width:1200px;height:800px;margin: 0 auto;background-color:white">
      <!--<template>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in 3" :key="item">
            <div class="demo-image__preview">
              <el-image
                style="width: 1200px; height:300px"
                :src="url"
                :preview-src-list="srcList">
              </el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
      </template>-->
      <el-image :src="url" style="position: absolute;left:315px;top: 280px">
      </el-image>

    <div style="margin-top: 40px;position: absolute;left: 615px;top: 700px">
      <el-button type="primary" round @click="touristLogin()">游客登录</el-button>
      <router-link to="/login"><el-button type="primary" round>用户登录</el-button></router-link>
      <router-link to="/regis"><el-button type="primary" round>点击注册</el-button></router-link>
    </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "index",
      data() {
        return {
          url: 'http://qaqo1a96h.bkt.clouddn.com/timg%20%281%29.jpg',
          srcList: [
          ]
        }
      },
      methods: {
        touristLogin(){
          var _this = this;
          axios.get('/api/user/touristLogin').then(function (res) {
              if (res.data == 'success') {
                _this.$router.push('/menuindex')
              }
          })
        }
      }
    }
</script>

<style scoped>

</style>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
